<template>
  <div>
    <div class="tag-container">

      <h3><b>
          标签
          <a-icon type="tags" />
        </b></h3>
      <a-tag color="#84C1FF"
             v-for="tag in tags"
             :key="tag">{{tag}}</a-tag>
      <a-input v-if="inputVisible"
               ref="input"
               type="text"
               size="small"
               :style="{ width: '78px' }"
               :value="inputValue"
               v-model="inputValue"
               @blur="handleInputConfirm"
               @keyup.enter="handleInputConfirm" />
      <a-tag v-else
             style="background: #fff; borderStyle: dashed;"
             @click="showInput">
        <a-icon type="plus" /> New Tag
      </a-tag>
    </div>

  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      tags: ['hey', 'hi', 'hello'],
      inputVisible: false,
      inputValue: '',
    }
  },
  methods: {
    showInput() {
      this.inputVisible = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      console.log(tags)
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      })
    },
  },
}
</script>

<style>
.tag-container {
  padding: 10px;
  width: 200px;
  height: 200px;
  line-height: 30px;
  margin-top: 130px;
  border-radius: 2px;
  margin-left: 20px;
  position: fixed;
  /* box-shadow: 1px 1px 1px 1px; */
}
</style>